<template>
  <div class="water-eval-container">
    <div id="main" style="width: 1200px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "cityGreenLand",
  components: {},
  data() {
    const xAxis = [];
    for (let i = 1; i < 31; i++) {
      xAxis.push(i + "日");
    }
    return {
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["综合", "增长率", "利润", "折线"],
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            interval: 0,
          },
          axisTick: {
            show: false, // 隐藏 x 轴的刻度线
          },
        },
        color: ["#ccc", "red", "yellow", "green"],
        yAxis: {
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "综合",
            type: "bar",
            z: "-1",
            barGap: "-100%",
            data: [15, 55, 93, 34, 86, 44],
            barWidth: "30%", // 设置柱子的宽度为 30%
            itemStyle: "line",
          },
          {
            name: "增长率",
            z: "1",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            barWidth: "30%", // 设置柱子的宽度为 30%
          },
          {
            name: "利润",
            z: "0",
            type: "bar",
            data: [10, 35, 57, 24, 76, 22],
            barWidth: "30%", // 设置柱子的宽度为 30%
          },
          {
            name: "折线",
            type: "line",
            symbolSize: 0,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
            barWidth: "30%", // 设置柱子的宽度为 30%
          },
        ],
      },
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.init();
    });
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss">
.water-eval-container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
}
</style>
